<template>
  <div class="inform">
    <el-card>
      <div class="wall">
        <h2>
          我的通知消息
          <a>(暂时只提供文章通知哦)</a>
        </h2>
        <div class="list">
          <!-- 列表展示组件 数组长度不等于0展示 -->
          <Works :worksData="infromData" v-if="infromData.lenght !== 0"></Works>
          <!-- 等于0 -->
          <div v-if="isload && infromData.lenght === 0">努力加载数据中，请稍等</div>
          <div v-if="!isload && infromData.lenght === 0">你还没有消息通知哦，快去让你朋友来@你吧</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Works from "@/views/works/index.vue";
export default {
  data() {
    return {
      isload: true, //控制页面没值的如何显示
      infromData: [], //我的通知数据
    };
  },
  mounted() {
    this.getinfromData();
  },
  methods: {
    async getinfromData() {
      let result = await this.$API.getinfromData();
      if (result.code === 200) {
        // 先判断是否值为空
        if (result.data.length === 0) {
          this.isload = false;
          return this.$message(
            "你暂时没有接受到消息通知哦，快去让你朋友来@你吧"
          );
        } else {
          // 解决图片问题
          result.data.forEach((item) => {
            if (item.pic_walls) {
              item.pic_walls = item.pic_walls.split("___");
            }
          });
          this.infromData = result.data; //赋值
        }
      }
    },
  },
  components: {
    Works,
  },
};
</script>

<style lang="less" scoped>
.inform {
  padding-top: 10px;
  .el-card {
    width: 1000px;
    min-height: 600px;
    margin: 0 auto;
    h2 {
      text-align: center;
      font-weight: 700;
      color: #008c8c;
      margin-bottom: 10px;
      a {
        color: #008c8c;
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}
</style>